<!-- Start gitalk -->
<script src="{{ "/assets/js/gitalk.min.js" | relative_url }}" /></script>
<!-- <div id="disqus_thread"><h3>Discussion and feedback</h3></div> -->
<div id="gitalk-container"></div>
<script>
    const gitalk = new Gitalk({
        clientID: '{{ site.gitalk.client_id }}',
        clientSecret: '{{ site.gitalk.client_secret }}',
        repo: '{{ site.gitalk.repo }}',
        owner: '{{ site.gitalk.owner }}',
        admin: '{{ site.gitalk.admin }}',
        id: location.pathname,      // Ensure uniqueness and length less than 50
        distractionFreeMode: false  // Facebook-like distraction free mode
    })

    gitalk.render('gitalk-container')
</script>
<noscript>Please enable JavaScript to view the <a href="https://gitalk.github.io/">comments powered by gitalk.</a></noscript>
<!-- End gitalk -->

<!-- ref: https://geektutu.com/post/blog-experience-7.html -->
<div id="gitalk-related"></div>
<script>
    window.addEventListener('load', function () {
        function render(comments) {
            var template = '<a href="${comment.url}?utm_source=gitalk" class="dis-item-url"><h3 class="dis-item-title">${comment.title}</h3>' +
                '<p class="dis-item-des">${comment.count} 评论 ● ${comment.date}</p>' +
                '<div class="dis-item-content"><img class="dis-item-img" src="${comment.icon}" alt="icon"><p><b><span class="dis-item-user">${comment.user}</span></b>&nbsp;——&nbsp;${comment.body}</p></div>' +
                '</a>'

            var wrapper = get('#gitalk-related');
            comments = shuffle(comments);
            comments.slice(0, 4).forEach(function (c) {
                var div = document.createElement('div');
                div.classList.add('dis-item');
                div.innerHTML = template.replace("${comment.url}", c.url)
                    .replace("${comment.title}", c.title)
                    .replace("${comment.count}", c.count)
                    .replace("${comment.date}", c.date)
                    .replace("${comment.icon}", c.icon)
                    .replace("${comment.user}", c.user)
                    .replace("${comment.body}", c.body)
                wrapper.appendChild(div)
            })
            var p = document.createElement('p')
            p.innerHTML = '<a href="https://geektutu.com/post/blog-experience-7.html">Gitalk Plus</a>';
            p.classList.add('dis-divide');
            wrapper.appendChild(p);
            wrapper.classList.add('dis-wrapper')
        }
        function shuffle(a) {
            for (var i = a.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                [a[i], a[j]] = [a[j], a[i]];
            }
            return a;
        }
        function get(str) { return document.querySelector(str) }
        fetch('/assets/data/comments.json').then(function (r) { return r.json() }).then(render).catch(function (e) { })
    })
</script>
